<template>
  <div class="index">
    <div class="screenCon">
      <div class="left" ref="leftImg">
        <!-- 地图画布 -->
      </div>
      <div class="right">
        <div class="topBox">
          <h1>
            <i class="el-icon-s-data"></i>
            设备统计
          </h1>
          <ul>
            <li>
              <div class="icon">
                <i
                  class="el-icon-s-cooperation"
                  :class="[flagA ? o : '']"
                  @mouseenter="flagA = true"
                  @mouseleave="flagA = false"
                ></i>
              </div>
              <div class="count">
                <h2>设备数量</h2>
                <h3>{{ statis.deviceCount }}</h3>
              </div>
            </li>
            <li>
              <div class="icon">
                <i
                  class="el-icon-s-platform"
                  :class="[flagB ? o : '']"
                  @mouseenter="flagB = true"
                  @mouseleave="flagB = false"
                ></i>
              </div>
              <div class="count">
                <h2>监测数据</h2>
                <h3>{{ statis.monitorCount }}</h3>
              </div>
            </li>
            <li>
              <div class="icon">
                <i
                  class="el-icon-menu"
                  :class="[flagC ? o : '']"
                  @mouseenter="flagC = true"
                  @mouseleave="flagC = false"
                ></i>
              </div>
              <div class="count">
                <h2>产品数量</h2>
                <h3>{{ statis.productCount }}</h3>
              </div>
            </li>
            <li>
              <div class="icon">
                <i
                  class="el-icon-s-opportunity"
                  :class="[flagD ? o : '']"
                  @mouseenter="flagD = true"
                  @mouseleave="flagD = false"
                ></i>
              </div>
              <div class="count">
                <h2>告警数量</h2>
                <h3>{{ statis.alertCount }}</h3>
              </div>
            </li>
            <li>
              <div class="icon">
                <i
                  class="el-icon-s-finance"
                  :class="[flagE ? o : '']"
                  @mouseenter="flagE = true"
                  @mouseleave="flagE = false"
                ></i>
              </div>
              <div class="count">
                <h2>操作记录</h2>
                <h3>{{ statis.functionCount }}</h3>
              </div>
            </li>
            <li>
              <div class="icon">
                <i
                  class="el-icon-s-order"
                  :class="[flagF ? o : '']"
                  @mouseenter="flagF = true"
                  @mouseleave="flagF = false"
                ></i>
              </div>
              <div class="count">
                <h2>上报事件</h2>
                <h3>{{ statis.eventCount }}</h3>
              </div>
            </li>
          </ul>
        </div>
        <div class="bottomBox">
          <h1>
            <i class="el-icon-s-order"></i>
            信息栏
          </h1>
          <ul>
            <li>
              <div class="title">
                <el-tag type="warning" effect="dark" size="mini"> 公告 </el-tag>
                <span class="span">物美智能V1.2版本发布</span>
              </div>
              <div class="time">
                <i class="el-icon-pie-chart"></i>
                2021-12-15
              </div>
            </li>
            <li>
              <div class="title">
                <el-tag type="" effect="dark" size="mini"> 信息 </el-tag>
                <span class="span">物美智能sdk支持树莓派</span>
              </div>
              <div class="time">
                <i class="el-icon-pie-chart"></i>
                2021-12-15
              </div>
            </li>
            <li>
              <div class="title">
                <el-tag type="" effect="dark" size="mini"> 信息 </el-tag>
                <span class="span">测试信息</span>
              </div>
              <div class="time">
                <i class="el-icon-pie-chart"></i>
                2022-06-15
              </div>
            </li>
            <li>
              <div class="title">
                <el-tag type="warning" effect="dark" size="mini"> 信息 </el-tag>
                <span class="span">测试公告</span>
              </div>
              <div class="time">
                <i class="el-icon-pie-chart"></i>
                2022-06-15
              </div>
            </li>
            <li>
              <div class="title">
                <el-tag type="" effect="dark" size="mini"> 信息 </el-tag>
                <span class="span">物美智能1.1版本</span>
              </div>
              <div class="time">
                <i class="el-icon-pie-chart"></i>
                2022-06-15
              </div>
            </li>
            <li>
              <div class="title">
                <el-tag type="" effect="dark" size="mini"> 信息 </el-tag>
                <span class="span">物美智能1.0版本</span>
              </div>
              <div class="time">
                <i class="el-icon-pie-chart"></i>
                2022-06-15
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="middle">
      <!-- 左 -->
      <div class="mqttIndex">
        <h1>Mqtt 统计指标</h1>
        <ul>
          <li>
            <div class="icon">
              <i
                class="el-icon-s-promotion"
                :class="[flagAA ? t : '']"
                @mouseenter="flagAA = true"
                @mouseleave="flagAA = false"
              ></i>
            </div>
            <div class="count">
              <h2>发送字节</h2>
              <h3>{{ metri.sent }}</h3>
            </div>
          </li>
          <li>
            <div class="icon">
              <i
                class="el-icon-s-order"
                :class="[flagBB ? t : '']"
                @mouseenter="flagBB = true"
                @mouseleave="flagBB = false"
              ></i>
            </div>
            <div class="count">
              <h2>接收字节</h2>
              <h3>{{ metri.received }}</h3>
            </div>
          </li>
          <li>
            <div class="icon">
              <i
                class="el-icon-s-custom"
                :class="[flagCC ? t : '']"
                @mouseenter="flagCC = true"
                @mouseleave="flagCC = false"
              ></i>
            </div>
            <div class="count">
              <h2>认证次数</h2>
              <h3>{{ metri.authenticate }}</h3>
            </div>
          </li>
          <li>
            <div class="icon">
              <i
                class="el-icon-info"
                :class="[flagDD ? t : '']"
                @mouseenter="flagDD = true"
                @mouseleave="flagDD = false"
              ></i>
            </div>
            <div class="count">
              <h2>连接次数</h2>
              <h3>{{ metri.connected }}</h3>
            </div>
          </li>
          <li>
            <div class="icon">
              <i
                class="el-icon-s-shop"
                :class="[flagEE ? t : '']"
                @mouseenter="flagEE = true"
                @mouseleave="flagEE = false"
              ></i>
            </div>
            <div class="count">
              <h2>订阅次数</h2>
              <h3>{{ metri.subscribe }}</h3>
            </div>
          </li>
          <li>
            <div class="icon">
              <i
                class="el-icon-s-comment"
                :class="[flagFF ? t : '']"
                @mouseenter="flagFF = true"
                @mouseleave="flagFF = false"
              ></i>
            </div>
            <div class="count">
              <h2>接收消息</h2>
              <h3>{{ metri.messages }}</h3>
            </div>
          </li>
        </ul>
      </div>
      <!-- 中 -->
      <div class="mqttStatus">
        <div class="mqttChartBox">
          <!-- 柱状图 -->
          <IndexMqtt :indexmqtt="indexmqtt"></IndexMqtt>
        </div>
        <div class="mqttBottomTable">
          <el-table stripe border :data="tabledata">
            <el-table-column
              align="center"
              prop="a"
              min-width="17%"
              label="服务器名"
            ></el-table-column>
            <el-table-column
              prop="b"
              min-width="25%"
              label="5d76ee9343c8"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="c"
              min-width="18%"
              label="Java名称"
            ></el-table-column>
            <el-table-column
              prop="d"
              min-width="40%"
              label="OpenJDK 64-Bit Server VM"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 右 -->
      <div class="charts">
        <div class="CPU">
          <!-- CPU使用率 -->
          <CPU :cpu="cpu"></CPU>
        </div>
        <div class="RAM">
          <!-- 内存使用率 -->
          <RAM :mem="mem"></RAM>
        </div>
        <div class="systemDisk">
          <!-- 系统盘使用率 -->
          <SystemDisk :sysFiles="sysFiles"></SystemDisk>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="left">
        <div class="top">
          <h1>物美智能生活物联网平台</h1>
          <h2>开源版本采用AGPL-3.0许可协议，商业用途需要获得授权</h2>
          <h3>
            <span>开源版本：</span>
            <i>可用于个人学习和使用，非商业用途，系统会有小概率弹窗</i>
          </h3>
          <h3>
            <span>商业版本：</span>
            <i
              >可用于商业用途，并提供所有源码，无弹窗，功能优先开源版本发布。</i
            >
          </h3>
        </div>
        <div class="bottom">
          <img src="https://iot.wumei.live/static/img/code.4ae965b2.jpg" />
          <div class="text">
            <h1>微信扫一扫，查看小程序端</h1>
            <h2>右侧是移动端H5版本演示</h2>
            <h3>官方网站&nbsp;&nbsp;&nbsp; <i>www.wumei.live</i></h3>
            <h4>在线文档&nbsp;&nbsp;&nbsp; <i>www.wumei.live/doc</i></h4>
            <h5>联系作者&nbsp;&nbsp;&nbsp; <i>QQ 164770707</i></h5>
            <h6>
              系统源码&nbsp;&nbsp;&nbsp; <span>Gitee源码</span>
              <i>Github源码</i>
            </h6>
          </div>
        </div>
      </div>
      <div class="right">
        <img src="../../assets/iphone.png" />
      </div>
    </div>
    <h4>Copyright © 2021-2022 Wumei Smart | 物美智能 | Apache License</h4>
    <h4>项目文档 https://wumei.live/doc/</h4>
  </div>
</template>

<script>
import CPU from "@/components/indexEcharts/CPU.vue";
import IndexMqtt from "@/components/indexEcharts/IndexMqtt.vue";
import RAM from "@/components/indexEcharts/RAM.vue";
import SystemDisk from "@/components/indexEcharts/SystemDisk.vue";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { loadBMap } from "@/assets/map";

export default {
  name: "Index",
  components: { CPU, IndexMqtt, RAM, SystemDisk },
  data() {
    return {
      // 地图数据
      deviceList: null,
      // CPU、内存、系统盘数据
      cpu: "",
      mem: "",
      sysFiles: "",
      // Mqtt状态数据
      indexmqtt: "",
      // 设备统计数据
      o: "bcg",
      flagA: false,
      flagB: false,
      flagC: false,
      flagD: false,
      flagE: false,
      flagF: false,
      statis: {
        deviceCount: "",
        monitorCount: "",
        productCount: "",
        alertCount: "",
        functionCount: "",
        eventCount: "",
      },
      // Mqtt统计指标数据
      t: "bcgcolor",
      flagAA: false,
      flagBB: false,
      flagCC: false,
      flagDD: false,
      flagEE: false,
      flagFF: false,
      metri: {
        sent: "",
        received: "",
        authenticate: "",
        connected: "",
        subscribe: "",
        messages: "",
      },
      // 表格数据
      tabledata: [
        {
          a: "服务器IP",
          b: "172.17.0.2",
          c: "启动时间",
          d: "2022-10-05 21:46:33",
        },
        {
          a: "操作系统",
          b: "Linux",
          c: "Java版本",
          d: "1.8.0_265",
        },
        {
          a: "系统架构",
          b: "amd64",
          c: "运行时长",
          d: "1天5小时15分钟",
        },
        {
          a: "CPU核心",
          b: "2",
          c: "占用内存",
          d: "86.24",
        },
        {
          a: "内存大小",
          b: "3.48",
          c: "JVM总内存",
          d: "153",
        },
      ],
    };
  },
  methods: {
    // 地图
    drawImgOne() {
      var myChart = echarts.init(this.$refs.leftImg);

      // 格式化数据
      let convertData = function (data, status) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = [data[i].longitude, data[i].latitude];
          if (geoCoord && data[i].status == status) {
            res.push({
              name: data[i].deviceName,
              value: geoCoord,
              serialNumber: data[i].serialNumber,
              status: data[i].status,
              isShadow: data[i].isShadow,
              firmwareVersion: data[i].firmwareVersion,
              networkAddress: data[i].networkAddress,
              productName: data[i].productName,
              activeTime: data[i].activeTime == null ? "" : data[i].activeTime,
              deviceId: data[i].deviceId,
              locationWay: data[i].locationWay,
            });
          }
        }
        return res;
      };
      let options = {
        title: {
          text: "设备分布（在线数 3 ）",
          subtext: "wumei-smart open source living iot platform",
          sublink: "https://iot.wumei.live",
          target: "_blank",
          textStyle: {
            color: "#333",
            textBorderColor: "#fff",
            textBorderWidth: 10,
          },
          top: 10,
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            var htmlStr = '<div style="padding:5px;line-height:28px;">';
            htmlStr +=
              "设备名称： <span style='color:#409EFF'>" +
              params.data.name +
              "</span><br />";
            htmlStr += "设备编号： " + params.data.serialNumber + "<br />";
            htmlStr += "设备状态： ";
            if (params.data.status == 1) {
              htmlStr += "<span style='color:#E6A23C'>未激活</span>" + "<br />";
            } else if (params.data.status == 2) {
              htmlStr += "<span style='color:#F56C6C'>禁用</span>" + "<br />";
            } else if (params.data.status == 3) {
              htmlStr += "<span style='color:#67C23A'>在线</span>" + "<br />";
            } else if (params.data.status == 4) {
              htmlStr += "<span style='color:#909399'>离线</span>" + "<br />";
            }
            if (params.data.isShadow == 1) {
              htmlStr +=
                "设备影子： " +
                "<span style='color:#67C23A'>启用</span>" +
                "<br />";
            } else {
              htmlStr +=
                "设备影子： " +
                "<span style='color:#909399'>未启用</span>" +
                "<br />";
            }
            htmlStr += "产品名称： " + params.data.productName + "<br />";
            htmlStr +=
              "固件版本： Version " + params.data.firmwareVersion + "<br />";
            htmlStr += "激活时间： " + params.data.activeTime + "<br />";
            htmlStr += "定位方式： ";
            if (params.data.locationWay == 1) {
              htmlStr += "自动定位" + "<br />";
            } else if (params.data.locationWay == 2) {
              htmlStr += "设备定位" + "<br />";
            } else if (params.data.locationWay == 3) {
              htmlStr += "自定义位置" + "<br />";
            } else {
              htmlStr += "未知" + "<br />";
            }
            htmlStr += "所在地址： " + params.data.networkAddress + "<br />";
            htmlStr += "</div>";
            return htmlStr;
          },
        },
        bmap: {
          center: [133, 38],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#a0cfff",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#fafafa", // #fffff8 淡黄色
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#fdfdfd",
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#999999",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999",
                },
              },
            ],
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(this.deviceList, 1),
            symbolSize: 15,
            itemStyle: {
              color: "#E6A23C",
            },
          },
          {
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(this.deviceList, 2),
            symbolSize: 15,
            itemStyle: {
              color: "#F56C6C",
            },
          },
          {
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(this.deviceList, 4),
            symbolSize: 15,
            itemStyle: {
              color: "#909399",
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(this.deviceList, 3),
            symbolSize: 15,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              scale: 5,
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false,
            },
            itemStyle: {
              color: "#67C23A",
              shadowBlur: 100,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
        ],
      };
      myChart.setOption(options);
    },
    loadMap() {
      this.$nextTick(() => {
        loadBMap().then(() => {
          this.drawImgOne();
        });
      });
    },
    // 获取地图数据
    async all() {
      try {
        let { code, rows } = await this.$http.indexW.all();
        if (code === 200) {
          this.deviceList = rows;
          this.loadMap();
        } else {
          this.$message.error("地图数据获取失败");
        }
      } catch (_) {
        _;
      }
    },
    // 获取设备统计数据
    async statistic() {
      try {
        let { code, data } = await this.$http.indexW.statistic();
        if (code === 200) {
          // console.log(data);
          let {
            deviceCount,
            monitorCount,
            productCount,
            alertCount,
            functionCount,
            eventCount,
          } = data;
          this.statis = {
            deviceCount,
            monitorCount,
            productCount,
            alertCount,
            functionCount,
            eventCount,
          };
        } else {
          this.$message.error("设备统计数据获取失败");
        }
      } catch (_) {
        _;
      }
    },
    // 获取信息栏数据
    async list() {
      try {
        let { code, rows } = await this.$http.indexW.list();
        if (code === 200) {
          // console.log(rows);
        } else {
          this.$message.error("信息栏数据获取失败");
        }
      } catch (_) {
        _;
      }
    },
    // 获取Mqtt统计指标数据
    async metrics() {
      try {
        let { code, data } = await this.$http.indexW.metrics();
        if (code === 0) {
          let obj = data[0].metrics;
          let sent = obj["bytes.sent"];
          let received = obj["bytes.received"];
          let authenticate = obj["client.authenticate"];
          let connected = obj["client.connected"];
          let subscribe = obj["client.subscribe"];
          let messages = obj["messages.received"];
          this.metri = {
            sent,
            received,
            authenticate,
            connected,
            subscribe,
            messages,
          };
        } else {
          this.$message.error("Mqtt统计指标数据获取失败");
        }
      } catch (_) {
        _;
      }
    },
    // 获取Mqtt状态数据
    async stats() {
      try {
        let { code, data } = await this.$http.indexW.stats();
        if (code === 0) {
          // console.log(data[0].stats);
          let stats = data[0].stats;
          this.indexmqtt = stats;
        } else {
          this.$message.error("Mqtt状态数据获取失败");
        }
      } catch (_) {
        _;
      }
    },
    // 获取CPU、内存、系统盘数据
    async server() {
      try {
        let { code, data } = await this.$http.indexW.server();
        if (code === 200) {
          // console.log(data);
          let { cpu, mem, sysFiles } = data;
          this.cpu = cpu;
          this.mem = mem;
          this.sysFiles = sysFiles;
        } else {
          this.$message.error("CPU、内存、系统盘数据获取失败");
        }
      } catch (_) {
        _;
      }
    },
  },

  created() {
    this.all();
    this.statistic();
    this.list();
    this.metrics();
    this.stats();
    this.server();
  },
};
</script>

<style lang="less" scoped>
.index {
  width: 100%;
  margin: 10px;
  margin-bottom: 40px;
  & > h4 {
    text-align: center;
    font-size: 14px;
    color: rgb(102, 102, 102);
    line-height: 32px;
    font-weight: normal;
  }
  & > h4:first-child {
    margin-top: 100px;
  }
}
.screenCon,
.middle,
.bottom {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #fff;
}

.screenCon {
  height: 653px;
  display: flex;
  background-color: rgb(248, 248, 248);

  .left {
    width: 60%;
    height: 653px;
    box-sizing: border-box;
    // background-color: rgb(34, 194, 167);
    border: 1px solid #e6ebf5;
    margin-right: 10px;
    border-radius: 4px;
  }

  .right {
    width: 51%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .topBox {
      width: 100%;
      background-color: #fff;
      height: 328px;
      border: 1px solid #e6ebf5;
      border-radius: 4px;
      h1 {
        width: 100%;
        height: 21px;
        margin: 18px 0 18px 25px;
        box-sizing: border-box;
      }
      ul {
        width: 96%;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        li {
          width: 43%;
          height: 68px;
          cursor: pointer;
          overflow: hidden;
          color: #666;
          border: 1px solid #eee;
          border-radius: 5px;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 15px;
          margin-top: 2px;
          .count {
            width: 56px;
            margin: 15px;
            h2 {
              line-height: 14px;
              color: rgba(0, 0, 0, 0.45);
              font-size: 14px;
              margin-bottom: 12px;
              text-align: right;
            }
            h3 {
              font-size: 18px;
              font-weight: 700;
              cursor: pointer;
              color: #666;
            }
          }
        }
      }
    }

    .topBox {
      ul > li:nth-child(2n-1) .icon {
        i {
          color: #36a3f7;
          font-size: 30px;
          margin: 10px;
          padding: 10px;
          border-radius: 6px;
          transition: all 0.38s ease-out;
        }
      }
      ul > li:nth-child(1) .icon {
        i.bcg {
          color: #fff;
          background-color: #36a3f7;
        }
      }
      ul > li:nth-child(3) .icon {
        i.bcg {
          color: #fff;
          background-color: #36a3f7;
        }
      }
      ul > li:nth-child(5) .icon {
        i.bcg {
          color: #fff;
          background-color: #36a3f7;
        }
      }
      ul > li:nth-child(2n) .icon {
        i {
          color: #f56c6c;
          font-size: 30px;
          margin: 10px;
          padding: 10px;
          border-radius: 6px;
          transition: all 0.38s ease-out;
        }
      }
      ul > li:nth-child(2) .icon {
        i.bcg {
          color: #fff;
          background-color: #f56c6c;
        }
      }
      ul > li:nth-child(4) .icon {
        i.bcg {
          color: #fff;
          background-color: #f56c6c;
        }
      }
      ul > li:nth-child(6) .icon {
        i.bcg {
          color: #fff;
          background-color: #f56c6c;
        }
      }
    }
    .bottomBox {
      width: 100%;
      height: 310px;
      background-color: #fff;
      border: 1px solid #e6ebf5;
      border-radius: 4px;
      box-sizing: border-box;
      h1 {
        width: 100%;
        height: 21px;
        margin: 18px 0 18px 25px;
        box-sizing: border-box;
      }
      ul {
        width: 94%;
        margin: 0 auto;
        li {
          width: 97%;
          height: 36px;
          cursor: pointer;
          overflow: hidden;
          color: #666;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 auto;
          .title {
            /deep/.el-tag--dark.el-tag--warning {
              background-color: #ffba00;
              border-color: #ffba00;
              color: #fff;
            }
            .span {
              margin-left: 10px;
              font-size: 16px;
              color: #000;
            }
          }
        }
        .time {
          margin-right: 10px;
          font-size: 10px;
          color: #000;
        }
      }
    }
  }
}

.middle {
  height: 638px;
  border: 1px solid #e6ebf5;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .mqttIndex {
    width: 30%;
    height: 570px;
    box-sizing: border-box;
    padding: 0 10px;
    h1 {
      width: 100%;
      height: 21px;
      margin: 18px 0 18px 27px;
      box-sizing: border-box;
    }
    ul {
      width: 94%;
      margin: 0 auto;
      li {
        width: 96%;
        height: 68px;
        cursor: pointer;
        overflow: hidden;
        color: #666;
        border: 1px solid #eee;
        border-radius: 5px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px;
        margin-top: 2px;
        .count {
          width: 100px;
          margin: 15px;
          h2 {
            line-height: 14px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 14px;
            margin-bottom: 12px;
            text-align: right;
          }
          h3 {
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            color: #666;
            text-align: right;
          }
        }
      }
    }
  }

  .mqttIndex {
    ul > li:nth-child(2n-1) .icon {
      i {
        color: #e6a23c;
        font-size: 35px;
        margin: 10px;
        padding: 10px;
        border-radius: 6px;
        transition: all 0.38s ease-out;
      }
    }
    ul > li:nth-child(1) .icon {
      i.bcgcolor {
        color: #fff;
        background-color: #e6a23c;
      }
    }
    ul > li:nth-child(3) .icon {
      i.bcgcolor {
        color: #fff;
        background-color: #e6a23c;
      }
    }
    ul > li:nth-child(5) .icon {
      i.bcgcolor {
        color: #fff;
        background-color: #e6a23c;
      }
    }
    ul > li:nth-child(2n) .icon {
      i {
        color: #34bfa3;
        font-size: 35px;
        margin: 10px;
        padding: 10px;
        border-radius: 6px;
        transition: all 0.38s ease-out;
      }
    }
    ul > li:nth-child(2) .icon {
      i.bcgcolor {
        color: #fff;
        background-color: #34bfa3;
      }
    }
    ul > li:nth-child(4) .icon {
      i.bcgcolor {
        color: #fff;
        background-color: #34bfa3;
      }
    }
    ul > li:nth-child(6) .icon {
      i.bcgcolor {
        color: #fff;
        background-color: #34bfa3;
      }
    }
  }

  .mqttStatus {
    width: 45%;
    height: 592px;
    padding: 0 0px;
    margin-left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .mqttChartBox {
      width: 514px;
      height: 275px;
    }

    .mqttBottomTable {
      width: 513px;
      height: 216px;
      .el-table {
        width: 100%;
        height: 100%;
      }
      /deep/.el-table thead {
        font-size: 12px;
        color: #606266;
        font-weight: 0 !important;
      }
      .el-table {
        font-size: 12px;
        color: #606266;
        font-weight: normal !important;
      }
      /deep/.el-table .el-table__cell {
        padding: 6px 0;
      }
    }
  }

  .charts {
    width: 20%;
    height: 600px;
    padding: 0 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    .CPU {
      width: 221px;
      height: 160px;
      border-bottom: 1px solid #e6ebf5;
    }

    .RAM {
      width: 221px;
      height: 160px;
      border-bottom: 1px solid #e6ebf5;
    }

    .systemDisk {
      width: 221px;
      height: 160px;
    }
  }
}

.bottom {
  height: 844px;
  border: 1px solid #e6ebf5;
  padding: 15px 20px 20px 20px;
  box-sizing: border-box;
  display: flex;
  i {
    color: #606266;
    font-style: normal;
    font-size: 14px;
  }
  .left {
    width: 601px;
    height: 611px;
    padding: 40px;
    box-sizing: border-box;
    .top {
      width: 521px;
      height: 246px;
      padding: 30px;
      margin: 20px 0px;
      font-size: 14px;
      box-sizing: border-box;
      h1 {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #303133;
      }
      h2 {
        color: rgb(103, 194, 58);
        margin-right: 10px;
        font-weight: bold;
        line-height: 22px;
        font-size: 14px;
      }
      h3 {
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
    .bottom {
      width: 521px;
      height: 300px;
      padding: 30px;
      margin: 20px 0px;
      font-size: 14px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      border: none;
      img {
        width: 210px;
        height: 210px;
      }
      .text {
        width: 221px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h1 {
          font-size: 18px;
          font-weight: bold;
          margin: 0px 0px;
          margin-top: 10px;
          color: #303133;
        }
        h2 {
          height: 18px;
          font-size: 14px;
          font-weight: bold;
          margin: 0px 0px;
          color: rgb(245, 108, 108);
        }
        h3,
        h4,
        h5,
        h6 {
          font-weight: bold;
          color: #303133;
          font-size: 14px;
        }
        h6 span {
          color: rgb(245, 108, 108);
        }
      }
    }
  }
  .right {
    width: 721px;
    height: 809px;
    padding: 40px;
    box-sizing: border-box;
    img {
      width: 370px;
      height: 729px;
      display: block;
      margin: 0 auto;
    }
  }
}
</style>

